<template>
  <div style="padding: 0 16px">
    <el-table
      v-loading="listLoading"
      :data="tableData"
      element-loading-text="加载中..."
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" prop="instance" label="实例名称" />
      <el-table-column #default="{ row }" align="center" prop="server" label="通信地址">
        <!-- <span class="server-link" @click="onLink(row)">{{ row.server }}</span> -->
        <span class="describe-input">{{ row.server }}</span>
      </el-table-column>
      <el-table-column #default="{ row }" align="center" prop="server" label="实例标题">
        <!-- <span class="server-link" @click="onLink(row)">{{ row.server }}</span> -->
        <span class="describe-input">{{ row.title }}</span>
      </el-table-column>
      <el-table-column #default="{ row }" align="center" prop="server" label="主WebUI">
        <span class="server-link" @click="onLink(row,'primary')">{{ row.webUrlPrimary }}</span>
      </el-table-column>
      <el-table-column #default="{ row }" align="center" prop="server" label="备WebUI">
        <span class="server-link" @click="onLink(row,'backup')">{{ row.webUrlBackup }}</span>
      </el-table-column>
      <el-table-column #default="{ row }" align="center" prop="describe" label="实例描述">
        <div v-show="!row.isEditDescribe" class="describe-wrap">
          <span class="describe-input">{{ row.describe }}</span>
        </div>
      </el-table-column>
      <el-table-column #default="{ row }" align="center" prop="province" width="200px" fixed="right" label="操作">
        <el-button type="text" round @click="editDescribe(row)">编辑</el-button>
        <!-- <el-button type="text" round @click="onLink(row)">查看</el-button> -->
      </el-table-column>
    </el-table>
    <el-dialog title="实例信息" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="80px">
        <el-form-item label="实例名称">
          <el-input v-model="form.instance" disabled autocomplete="off" />
        </el-form-item>
        <el-form-item label="通信地址">
          <el-input v-model="form.server" disabled autocomplete="off" />
        </el-form-item>
        <el-form-item label="实例标题">
          <el-input v-model="form.title" placeholder="请输入实例标题" autocomplete="off" />
        </el-form-item>
        <el-form-item label="主WebUI">
          <el-input v-model="form.webUrlPrimary" placeholder="请输入主WebUI" autocomplete="off" />
        </el-form-item>
        <el-form-item label="备WebUI">
          <el-input v-model="form.webUrlBackup" placeholder="请输入备WebUI" autocomplete="off" />
        </el-form-item>
        <el-form-item label="实例描述">
          <el-input v-model="form.describe" placeholder="请输入实例描述" type="textarea" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onEdit(form)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { InstanceApi } from '@/api/instance'
export default {
  data() {
    return {
      tableData: [],
      listLoading: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      form: {
        instance: '',
        server: '',
        describe: '',
        title: ''
      }
    }
  },
  async mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.listLoading = true
      const {
        data: { data }
      } = await InstanceApi.getData()
      this.tableData = data.map((i) => { return i })
      this.listLoading = false
    },
    editDescribe(row) {
      this.dialogFormVisible = true
      this.form = { ...row }
    },
    onLink(row, sign) {
      if (sign === 'primary') {
        window.open(row.webUrlPrimary, '_blank')
      } else {
        window.open(row.webUrlBackup, '_blank')
      }
    },
    onEdit(from) {
      this.dialogFormVisible = false
      InstanceApi.updateInstance(from).then((resp) => {
        const code = resp.data.code
        if (code === 200) this.fetchData()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.server-link {
  text-decoration: underline;
  color: #409eff;
  cursor: pointer;
}
</style>
